<template>
  <div class="container">
    <common-head :showIcon="false"></common-head>
    <div class="parking-card-container">
      <div class="head-img">
        <img :src="userAvatar" alt="用户头像" />
        <!-- <a href="#">点击更换头像</a> -->
        <van-uploader :after-read="afterRead">
          <a>点击更换头像</a>
        </van-uploader>
      </div>
      <div class="user-form">
        <div class="form-head">
          个人信息
        </div>
        <van-field
          class="user-input"
          v-model="name"
          label="用户名："
          placeholder="请输入用户名"
        />
        <van-field
          class="user-input"
          v-model="phone"
          label="手机号码"
          placeholder="请输入手机号码"
        />
        <div class="foot">
          <van-button
            type="primary"
            color="#2f6fe2"
            size="mini"
            class="foot-button"
            @click="goBack(-1)"
            >取消修改</van-button
          >
          <van-button
            type="primary"
            color="#2f6fe2"
            size="mini"
            class="foot-button"
            @click="confirmSave"
            >确认保存</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonHead from "../../components/xc/commonHead.vue";
import setting from "@/setting";
export default {
  components: {
    commonHead
  },
  data() {
    return {
      name: "",
      phone: "",
      avatar: "",
      userInfo: {},
      avatar: null,
      userId: "",
      uploadFileAddress: "",
      showAvater: "",
      userAvatar: ""
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    afterRead(file) {
      this.avatar = file.content;
      const formData = new FormData();
      formData.append("biz", "temp");
      formData.append("file", file.file);
      this.baseService
        .post("/user-center/sys/common/upload", formData)
        .then(res => {
          if (file.file.type == "application/vnd.android.package-archive") {
            // 上传接口 TODO
            // this.baseService
            //   .post("/msg/updateVersion/setAppInfo", {
            //     title: "测试上传版本",
            //     version: "1.0.0",
            //     url:
            //       "http://10.99.20.12:8150/user-center/sys/common/static/temp/pda_1744180755987.apk",
            //     appId: "1000001"
            //   })
            //   .then(result => {
            //     console.log("上传版本的结果---->", result);
            //   });
          } else {
            this.uploadFileAddress = res.result;
            this.userAvatar = res.result;
          }
        });
    },
    getUserInfo() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.baseService
        .get("/user-center/sys/user/queryById?id=" + userInfo.id)
        .then(res => {
          this.name = res.result.realname;
          this.phone = res.result.phone;
          this.avatar = res.result.avatar;
          this.userInfo = res.result;
          this.userId = res.result.id;
        this.userAvatar = setting.ctx + '/user-center/sys/common/static/' + res.result.avatar;
        // this.userAvatar =  res.result.avatar;
        });
    },
    // 确认修改个人信息
    confirmSave() {
      this.$dialog
        .confirm({
          title: "修改个人信息确认",
          message: "确定要修改个人信息吗？",
          confirmButtonColor: "#ee0a24"
        })
        .then(async () => {
          try {
            this.userInfo.realname = this.name;
            this.userInfo.phone = this.phone;
            const { code, message } = await this.baseService.post(
              "/user-center/sys/user/edit",
              {
                id: this.userId,
                phone: this.phone,
                realname: this.name,
                avatar: this.uploadFileAddress || this.userAvatar,
                
              }
            );
            if (code === 200) {
              this.$toast({
                message: message,
                duration: 2000
              });
              this.$router.go(-1);
            } else {
              this.$toast({
                message: "修改个人信息失败",
                duration: 2000
              });
            }
          } catch (error) {
            this.$toast({
              message: error.message,
              duration: 2000
            });
          }
        });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.container {
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.parking-card-container {
  height: 100vh;
  background-color: #cee7ff;
  background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
}
.head-img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  flex-direction: column;
}
.head-img img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.head-img a {
  color: #1989fa;
  font-size: 12px;
  margin-top: 10px;
}
.user-form {
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  margin: 10px;
  font-size: 14px;
}
.form-head {
  font-size: 16px;
  color: #1989fa;
  padding: 10px 0px;
  border-bottom: 1px solid #3333332d;
}
.user-input {
  border-bottom: 1px solid #3333332d;
  margin: 10px 0px;
}
.foot {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 16px 0px;
}
.foot-button {
  padding: 14px 10px;
  border-radius: 5px;
  margin-top: 20px;
}
.user-input {
  border-bottom: 1px solid #3333332d;
  margin: 16px 0px;
}

a,
body,
div,
html,
i,
img,
input,
li,
p,
select,
span,
textarea,
ul {
  font-size: 12px;
}
</style>
